<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid 插件</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body>
<div class="container-fluid" style="height:auto;">
	<h3>Grid插件</h3>
	<div class="mylist container-fluid" style="height:300px;">
        <table id="GridID" class=" table table-bordered table-hover table-striped">  
            <thead>  
                <tr>  
                    <th width="100">订单</th>  
                    <th width="200">合同</th>  
                    <th width="200">到货通知编号 &nbsp;<i class="caret"></i></th>  
                    <th width="200">货物状态 &nbsp;<i class="caret"></i></th>  
                    <th width="200">产品名称</th>  
                    <th width="200">型号asdf</th> 
                    <th width="200">规格asdf &nbsp;<i class="caret down"></i></th>  
                    <th width="200">数量asdf &nbsp;<i class="caret down"></i></th>  
                    <th width="300">订单日期asdf</th> 
                </tr>  
            </thead>  
            <tbody>  
                <tr>  
                    <td></td>
                    <td>到货通知编号到货通 知编号到货 通知编号到货通知编号到货通知编号到货通知编号到 货通知编号到货通知编号</td>
                    <td>ad f asf</td>
                    <td></td>
                    <td></td>
                    <td>到货通知编号到货通知编号到货通知编号到货通知编号</td> 
                    <td></td>
                    <td>7</td>
                    <td></td> 
                </tr>
            </tbody>
        </table>
    </div>
	<h3>Html Code</h3>
    <div>
    	<pre>
        	<code>
            	<span>&lt;!--首先创建容器--&gt;</span>
            	<span>&lt;div class="mylist container-fluid" style="height:300px;"&gt;/span>
                    <span>&lt;!--创建Table--&gt;</span>
                    <span>&lt;table id="GridID" class=" table table-bordered table-hover table-striped" &gt;</span>
                        <span>&lt;!--表头部分--&gt;</span>
                        <span>&lt;thead&gt;</span>
                            <span>&lt;tr&gt;</span>
                                <span>&lt;th width="100"&gt;订单&lt;/th&gt;</span>
                                <span>&lt;th width="200"&gt;合同&lt;/th&gt;</span>
                                <span>&lt;th width="200"&gt;到货通知编号 &nbsp;&lt;i class="caret"&gt;&lt;/i&gt;&lt;/th&gt;</span>
                                <span>&lt;th width="200"&gt;货物状态 &nbsp;&lt;i class="caret"&gt;&lt;/i&gt;&lt;/th&gt;</span>
                                <span>&lt;th width="200"&gt;产品名称&lt;/th&gt;</span>
                                <span>&lt;th width="200"&gt;型号asdf&lt;/th&gt;</span>
                                <span>&lt;th width="200"&gt;规格asdf &nbsp;&lt;i class="caret down"&gt;&lt;/i&gt;&lt;/th&gt;</span>
                                <span>&lt;th width="200"&gt;数量asdf &nbsp;&lt;i class="caret down"&gt;&lt;/i&gt;&lt;/th&gt;</span>
                                <span>&lt;th width="300"&gt;订单日期asdf&lt;/th&gt;</span>
                            <span>&lt;/tr&gt;</span>
                        <span>&lt;/thead&gt;</span>
                        <span>&lt;!--内容部分--&gt;</span>
                        <span>&lt;tbody></span>
                            <span>&lt;tr></span>
                                <span>&lt;td&gt;&lt;/td&gt;</span>
                                <span>&lt;td&gt;到货通知编号到货通 知编号到货 通知编号到货通知编号到货通知编号到货通知编号到 货通知编号到货通知编号&lt;/td&gt;</span>
                                <span>&lt;td>ad f asf&lt;/td&gt;</span>
                                <span>&lt;td>&lt;/td&gt;</span>
                                <span>&lt;td>&lt;/td&gt;</span>
                                <span>&lt;td>到货通知编号到货通知编号到货通知编号到货通知编号&lt;/td&gt;</span>
                                <span>&lt;td>&lt;/td&gt;</span>
                                <span>&lt;td>7&lt;/td&gt;</span>
                                <span>&lt;td>&lt;/td&gt;</span>
                            <span>&lt;/tr&gt;</span>
                        <span>&lt;/tbody&gt;</span>
                    <span>&lt;/table&gt;</span>
                <span>&lt;/div&gt;</span>
            </code>
        </pre>
    </div>
    <h3>JS  Code</h3>
    <div>
    	<pre>
        	<code>
                <span>
                    /*引入JS库*/
                    &lt;script src="../../Scripts/jquery.min.js"&gt;&lt;/script&gt;
                    &lt;script src="../../Scripts/jquery.kgrid.js"&gt;&lt;/script&gt;
                    &lt;script&gt;
                        $(function(){
                            if( $(window).width()>768){
                                /*使用Table的ID 进行调用*/
                                $("#GridID").kgrid({
                                    fixed: 2
                                });
                            }
                        })
                    &lt;/script&gt;
                </span>
            </code>
        </pre>
    </div>
    <h3>简要说明</h3>
    <p>首先页面需要调用 jquery.min.js, jquery.kgrid.js 两个文件，然后才能使用上面JS代码对相关表格调用。</p>
</div>

<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/jquery.kgrid.js"></script>
<script>
	$(function(){
		if( $(window).width()>768){
			/*使用Table的ID 进行调用*/
			$("#GridID").kgrid({
			   fixed: 2
			});
        }
	})
</script>
</body>
</html>
